<%@ include file="../layout/taglib.jsp"%>
<div class="content-middle" id="content-middle">
	<div class="wrap">
		
		<div class="table">
			<div class='row'>
				<div class="table">
					<div class="cell_feature">
						<div class="boxImage">
							<img
								src="<%=request.getContextPath()%>/resources/images/front/our-featured-courses.jpg"
								alt=""/>
						</div>
					</div>
				</div>
				<jsp:useBean id="now" class="java.util.Date" />
											 <fmt:formatDate var="year" value="${now}" pattern="yyyy" /> 
				<c:forEach items="${courses}" var="course" varStatus="status">
					<c:if test="${status.index eq 0 or status.index eq 1}">
						
						
							<div class="cell" id = "${course.idCourse}" style="background-image: url(<%=request.getContextPath()%>/photoCorfront/${course.idCourse}) ;background-repeat:no-repeat;height: 290px; width: 290px;">
							     <div id="image_user">
								      <img alt="${course.teacher.firstName}" src="<%=request.getContextPath()%>/photoUser?idUser=${course.teacher.idUser}">
								    </div>
							     <div id="text_title">
								    <p>${course.titleProd}</p>
								  </div>
								  <div id="text_name"> 
								    <p>By  ${course.teacher.firstName}</p> 
								  </div>
								  <hr class="break_line" width="50%">
								  
								 	<div id="text_view">
								 	  <img alt="view" src="<%=request.getContextPath()%>/resources/images/front/View.png">
								      <c:if test="${empty course.nbview}">0</c:if>
								      <c:if test="${not empty course.nbview}">${course.nbview}</c:if>
								 
								     </div> 
								      <c:if test="${not empty course.dateCreation}">
									     
									   		 <fmt:formatDate var="creation_year1" value="${course.dateCreation}" pattern="yyyy" />
									    <div id="text_view">
									    	<img alt="Calendar" src="<%=request.getContextPath()%>/resources/images/front/Calendar.png" width="10px">
									    Created ${year-creation_year1} years ago</div>
								   </c:if>
								        
							</div>
							
							
						
					</c:if>
				</c:forEach>


			</div>
         <div class='row'>
			
				     <div class='table'>
				       <c:forEach items="${courses}" var="course" varStatus="status">
			        	<c:if test="${status.index eq 2 or status.index eq 3}">
						
							<div class="cell"  id = "${course.idCourse}" style="background-image: url(<%=request.getContextPath()%>/photoCorfront/${course.idCourse});background-repeat:no-repeat;height: 290px; width: 290px;">
									 <div id="image_user">
								      <img alt="${course.teacher.firstName}" src="<%=request.getContextPath()%>/photoUser?idUser=${course.teacher.idUser}">
								    </div>
									  <div id="text_title">
								        <p>${course.titleProd}</p>
								      </div>
								      <div id="text_name">
								        <p>By  ${course.teacher.firstName}</p> 
								     </div>
								 <hr class="break_line" width="50%"> 
								   	<div id="text_view">
								   	<img alt="view" src="<%=request.getContextPath()%>/resources/images/front/View.png">
								      <c:if test="${empty course.nbview}">0</c:if>
								      <c:if test="${not empty course.nbview}">${course.nbview}</c:if>
							
								   </div>
								    <c:if test="${not empty course.dateCreation}">
									 
									   	<fmt:formatDate var="creation_year2" value="${course.dateCreation}" pattern="yyyy" />
									    <div id="text_view">
									    	<img alt="Calendar" src="<%=request.getContextPath()%>/resources/images/front/Calendar.png" width="10px">
									        Created ${year-creation_year2} years ago
									    </div>
								   </c:if>
							</div>
						
					     </c:if>
						</c:forEach>
					</div>
				 <c:forEach items="${courses}" var="course" varStatus="status">	
              	<c:if test="${status.index eq 4 or status.index eq 5}">
				     
						
							<div class="cell" id = "${course.idCourse}" style="background-image: url(<%=request.getContextPath()%>/photoCorfront/${course.idCourse});background-repeat:no-repeat;height: 290px; width: 290px;">
								    
								    <div id="image_user">
								      <img alt="${course.teacher.firstName}" src="<%=request.getContextPath()%>/photoUser?idUser=${course.teacher.idUser}">
								    </div>
								    
								    <div id="text_title">
								    	<p>${course.titleProd}</p>
								    </div>	
								    <div id="text_name">
								    	<p>By ${course.teacher.firstName}</p>
								    </div>	
								 	<hr class="break_line" width="50%"> 
								 	<div id="text_view">
								 	  <img alt="view" src="<%=request.getContextPath()%>/resources/images/front/View.png" width="10px">
								      <c:if test="${empty course.nbview}">0</c:if>
								      <c:if test="${not empty course.nbview}">${course.nbview}</c:if>
								  </div> 
								  
								   <c:if test="${not empty course.dateCreation}">
									  
									   		 <fmt:formatDate var="creation_year3" value="${course.dateCreation}" pattern="yyyy" />
									    <div id="text_view">
									    	<img alt="Calendar" src="<%=request.getContextPath()%>/resources/images/front/Calendar.png" width="10px">
									    Created ${year-creation_year3} years ago</div>
								   </c:if>
							</div>
						
					
					</c:if>
              </c:forEach>

			
</div>
			
			<div class="clear"></div>
		</div>
	</div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript"  src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
$(".cell").click(function() {
  var id_res= this.id;
  window.location = '<%=request.getContextPath()%>/lstcourses/course?idCor='+id_res; 
  return false;
});

});

</script>		